<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
  vue 生命周期   8个生命周期函数  钩子函数
  1. 初始化阶段
       beforeCreate()     vue只是完成了事件和生命周期函数的初始化
       created()          data  语法校验  数据代理
       beforeMount()      完成了模板的编译 但是没有替换
       mounted()          完成模板替换
  2. 数据监听阶段
     beforeUpdate()       数据没有重新渲染
     updated()            数据完成重新渲染
        data中的数据被改变时 会自动调用以上两个函数
  3. 销毁阶段
       beforeDestroy()
       destroyed()
        完成子组件,事件监听的卸载

-->
<div id="app">
    <h2 id="info">{{info}}</h2>
    <input type="text" v-model ="info">
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            info: 'vue  instance life circle',
            students: []
        },
        methods: {},
        beforeCreate() {
            console.log("----------------beforeCrete---------------")
            let txt = document.getElementById("info").innerText
            console.log(txt)
            console.log("info:", this.info)
        },
        created() {
            console.log("----------------created---------------")
            let txt = document.getElementById("info").innerText
            console.log(txt)
            console.log("info:", this.info)
            // 发送异步请求的最早位置
        },
        beforeMount(){
            console.log("----------------beforeMount---------------")
            let txt = document.getElementById("info").innerText
            console.log(txt)
        },
        mounted(){
            console.log("----------------mounted---------------")
            let txt = document.getElementById("info").innerText
            console.log("txt:",txt)
        },
        beforeUpdate(){
            console.log("----------------beforeUpdate---------------")
            let txt = document.getElementById("info").innerText
            console.log("txt:",txt)
        },
        updated(){
            console.log("----------------updated---------------")
            let txt = document.getElementById("info").innerText
            console.log("txt:",txt)
        },
        beforeDestroy(){
            console.log("---------------- beforeDestroy---------------")
        },
        destroyed(){
            console.log("----------------destroyed---------------")
        }
    })
</script>
</body>
</html>